import React from 'react';
import { Book } from '../types/book';
import { Link } from 'react-router-dom';

interface BookListProps {
  books: Book[];
}

export const BookList: React.FC<BookListProps> = ({ books }) => {
  return (
    <div className="p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {books.map((book) => (
          <Link
            to={`/book/${book.id}`}
            key={book.id}
            className="block bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-200 max-w-sm mx-auto"
          >
            <div className="hidden md:block aspect-w-3 aspect-h-4 w-48 mx-auto pt-4">
              <img
                src={book.cover}
                alt={book.titleEnglish}
                className="object-contain w-full h-full rounded-lg"
              />
            </div>
            <div className="p-4">
              <h2 className="text-xl font-semibold mb-1">{book.titleEnglish}</h2>
              <h3 className="text-lg text-gray-700 mb-2">{book.titleChinese}</h3>
              <p className="text-gray-600">{book.author}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}; 
